<template>
    <div id="home">
        <nav-bar class="home-nav">
            <div slot="center">
                购物街
            </div>
        </nav-bar>
        <tab-control
                ref="tabControl2"
                @tabClick="tabClick"
                class="tab-control"
                :texts="['流行', '新款', '精选']" v-show="isFixed"/>
        <scroll class="content"
                ref="scroll"
                :pullUpLoad="true"
                :probeType="3"
                @pullingUp="pullingUp"
                @scroll="scroll">
            <home-swiper :banners="banners" @bannerLoad="bannerLoad"/>
            <recommend :recommends="recommends"/>
            <feature/>
            <tab-control
                    ref="tabControl1"
                    @tabClick="tabClick"
                    :texts="['流行', '新款', '精选']"/>
            <goods-list :goods="showGoods"/>
        </scroll>
        <back-top v-show="display" @click.native="backTop"/>
    </div>
</template>

<script>
    import HomeSwiper from './childComps/HomeSwiper';
    import Recommend from './childComps/HomeRecommendView';
    import Feature from './childComps/FeatureView';
    import navBar from 'common/navbar/Navbar';
    import TabControl from 'content/tabControl/TabControl';
    import GoodsList from 'content/goods/GoodsList';
    import Scroll from 'common/scroll/Scroll';

    import {iteImgLoadMixin, backTopMixin} from '@/common/mixin';
    import {getHomeMultidata, getHomeGoods} from "network/home";

    export default {
        name: "Home",
        components : {
            HomeSwiper,
            Recommend,
            Feature,
            navBar,
            TabControl,
            GoodsList,
            Scroll
        },
        mixins: [iteImgLoadMixin, backTopMixin],
        data() {
          return {
              banners: [],
              recommends: [],
              goods: {
                  'pop': {pages: 0, list:[]},
                  'new': {pages: 0, list:[]},
                  'sell': {pages: 0, list:[]}
              },
              type: 'pop',
              tabOffsetTop: 0,
              isFixed: false,
              saveY: 0
          }
        },
        created() {
            //请求轮播数据
            this.getHomeMultidata();

            //请求商品数据
            this.getHomeGoods('pop');
            this.getHomeGoods('new');
            this.getHomeGoods('sell');
        },
        computed: {
            showGoods() {
                return this.goods[this.type].list;
            }
        },
        mounted() {

        },
        activated() {
            this.$refs.scroll.refresh();
            this.$refs.scroll.scrollTo(0, this.saveY, 0)
        },
        deactivated() {
            //1.保存y值
            this.saveY = this.$refs.scroll.getScrollY()

            //2.取消全局事件的监听
            this.$bus.$off('imgLoad', this.itemImgLoad)
        },
        methods: {
            /*
            * 网络请求方法
            * */
            getHomeMultidata() {
                getHomeMultidata()
                    .then(res => {
                        // console.log(res)
                        this.banners = res.data.banner.list;
                        this.recommends = res.data.recommend.list;
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            /*
            * 获取首页所有的商品信息
            * @param string type 商品的类型
            * */
            getHomeGoods(type) {
                const page = this.goods[type].pages + 1;
                getHomeGoods(type, page)
                    .then(res => {
                        this.goods[type].list.push(...res.data.list);
                        this.goods[type].pages++;

                        //完成上拉加载更多
                        this.$refs.scroll.finishPullUp();
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            /*
            * 首页tab点击切换数据
            * @param number index 当前tab的索引值
            * */
            tabClick(index) {
                let arr = [];
                arr.push(...Object.keys(this.goods));
                this.type = arr[index];

                //将最新的index索引重新赋值，防止两个tabControl选择冲突
                this.$refs.tabControl1.currentIndex = index;
                this.$refs.tabControl2.currentIndex = index;
            },

            // /*
            // * 回到顶部
            // * */
            // backTop() {
            //     this.$refs.scroll.scrollTo(0, 0, 500);
            // },

            /*
            * 显示隐藏回到顶部图标
            * @param number position 实时滚动的距离
            * */
            scroll(position) {
                //判断backtop图标是否显示
                if (-position.y > 1000) {
                    this.display = true
                }else {
                    this.display = false
                }

                //判断tabControl是否吸顶
                if (position.y < -this.tabOffsetTop) {
                    this.isFixed = true
                }else {
                    this.isFixed = false
                }
            },

            /*
            * 上拉加载更多
            * */
            pullingUp() {
                this.getHomeGoods(this.type);
            },

            /*
            * 监听轮播图加载
            * */
            bannerLoad() {
                //获取tabControl的offsetTop
                //所有的组件都有一个属性$el
                this.tabOffsetTop = this.$refs.tabControl1.$el.offsetTop;
            }
        }
    }
</script>

<style scoped>
    #home {
        /*padding-top: 44px;*/
        height: 100vh;
        position: relative;
    }
    .home-nav {
        background-color: var(--color-tint);
        color: #fff;
        /*z-index:9;*/
    }
    .tab-control {
        position: relative;
        z-index: 9;
    }
    .content {
        overflow: hidden;
        position: absolute;
        top: 44px;
        bottom: 49px;
        left: 0;
        right: 0;
    }
    /*.content {*/
    /*    height: calc(100% - 93px);*/
    /*    overflow: hidden;*/
    /*    margin-top: 44px;*/
    /*}*/
</style>